<template>
  <div class='container'>
    <div class="questionsInput-title">
      <div>试题录入</div>
    </div>
    <div class="questionInput-from">
      <el-form
      v-model="questionsRuleForm"
    >
        <el-form-item label="学科" label-width="80px" :required="true">
          <el-select
            v-model="questionsRuleForm.subjectID"
            placeholder="请选择"
            class="input-width"
            @change="getSubjectID"
          >
            <el-option
              v-for="(type, i) in subjectsType"
              :key="i"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="目录" label-width="80px" :required="true">
          <el-select
            v-model="questionsRuleForm.catalogID"
            placeholder="请选择"
            class="input-width"
          >
            <el-option
              v-for="(item, i) in catalogList"
              :key="i"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="企业" label-width="80px" :required="true">
          <el-select
            v-model="questionsRuleForm.enterpriseID"
            placeholder="请选择"
            class="input-width"
          >
           <el-option
              v-for="(item, i) in enterprise"
              :key="i"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="城市" label-width="80px" :required="true">
            <el-cascader
              v-model="questionsRuleForm.province"
              :options="provinces"
              @change="Getprovince"
              style="width: 195px; margin-right: 10px;"
            />
            <el-cascader
              v-model="questionsRuleForm.city"
              :options="citys"
              @change="GetCity"
              style="width: 195px"
            />
        </el-form-item>

        <el-form-item label="方向" label-width="80px" :required="true">
          <el-select
            v-model="questionsRuleForm.direction"
            placeholder="请选择"
            class="input-width"
          >
           <el-option
              v-for="(item, i) in direction"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="题目备注" label-width="80px" :required="true">
          <el-radio-group v-model="questionsRuleForm.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度" label-width="80px" :required="true">
          <el-radio-group v-model="questionsRuleForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="题干" label-width="80px" :required="true">
            <quill-editor
              v-model="questionsRuleForm.question"
              :options="editorOption"
            >
        </quill-editor>
        </el-form-item>
        <!-- 单选 -->
        <el-form-item label="选项" label-width="80px" :required="true" v-if="questionsRuleForm.questionType === '1'">
          <el-radio-group v-model="radio">
            <div class="radio">
              <el-radio label="A">A: </el-radio>
              <el-input
                v-model="questionsRuleForm.options.A"
                class="options-width"
              />
            </div>
            <div class="radio">
              <el-radio label="B">B:</el-radio>
              <el-input
                v-model="questionsRuleForm.options.B"
                class="options-width"
              />
            </div>
            <div class="radio">
              <el-radio label="C">C:</el-radio>
              <el-input
                v-model="questionsRuleForm.options.C"
                class="options-width"
              />
            </div>
            <div class="radio">
              <el-radio label="D">D:</el-radio>
              <el-input
                v-model="questionsRuleForm.options.D"
                class="options-width"
              />
            </div>
          </el-radio-group>
        </el-form-item>
        <!-- 多选 -->
        <el-form-item label="选项" label-width="80px" :required="true" v-if="questionsRuleForm.questionType === '2'">
          <el-checkbox-group v-model="checkList">
            <div class="radio">
              <el-checkbox label="A">A:</el-checkbox>
              <el-input
                  v-model="questionsRuleForm.options.A"
                  class="options-width"
                />
            </div>

            <div class="radio">
            <el-checkbox label="B">B:</el-checkbox>
            <el-input
                v-model="questionsRuleForm.options.B"
                class="options-width"
              />
            </div>

            <div class="radio">
            <el-checkbox label="C">C:</el-checkbox>
            <el-input
                v-model="questionsRuleForm.options.C"
                class="options-width"
              />
            </div>

            <div class="radio">
            <el-checkbox label="D">D:</el-checkbox>
            <el-input
                v-model="questionsRuleForm.options.D"
                class="options-width"
              />
            </div>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="解析视频" label-width="80px" :required="true">
          <el-input
            v-model="questionsRuleForm.videoURL"
            class="input-width"
          />
        </el-form-item>

        <el-form-item label="答案解析" label-width="80px" :required="true">
          <quill-editor
              v-model="questionsRuleForm.answer"
              :options="editorOption"
          />
        </el-form-item>

        <el-form-item label="题目备注" label-width="80px" :required="true">
          <el-input
            type="textarea"
            v-model="questionsRuleForm.remarks"
            class="input-width"
          />
        </el-form-item>

        <!-- to do -->

        <el-form-item label="试题标签" label-width="80px" :required="true">
          <el-select
            v-model="questionsRuleForm.tags"
            placeholder="请选择"
            class="input-width"
          >
            <el-option
              v-for="(item, i) in LabelList"
              :key="i"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label-width="80px" :required="true">
           <el-button
            type="primary"
            @click="submit"
           >
            确认提交
          </el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as cityApi from '@/api/hmmm/citys'
import * as constants from '@/api/hmmm/constants'
import { add } from '@/api/hmmm/questions'

export default {
  data () {
    return {
      questionsRuleForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        answer: '',
        // 解析视频
        videoURL: '',
        // 题目备注
        remarks: '',
        // 试题标签
        tags: '',
        options: {
          A: '',
          B: '',
          C: '',
          D: ''
        },
        imageUrl: ''
      },
      radio: 'A',
      checkList: [],
      provinces: [],
      citys: [],
      questionType: 1,
      difficulty: 1,
      direction: '',
      enterprise: [],
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      }
    }
  },
  computed: {
    ...mapState('subjects', [
      'subjectsType'
    ]),
    ...mapState('tags', [
      'catalogList'
    ]),
    ...mapState('companys', [
      'companysList'
    ]),
    ...mapState('directorys', [
      'LabelList'
    ])
  },
  async created () {
    this.updateSubjectsType()
    this.provinces = cityApi.provinces().map(d => ({
      value: d,
      label: d
    }))
    this.direction = constants.direction
    await this.updataCompanysList({
      pageSize: 10000
    })
    this.enterprise = this.companysList.items.map(d => ({
      label: d.company,
      value: d.creatorID
    }))
  },
  methods: {
    ...mapActions('subjects', [
      'updateSubjectsType'
    ]),
    ...mapActions('tags', [
      'updateCatalogList'
    ]),
    ...mapActions('companys', [
      'updataCompanysList'
    ]),
    ...mapActions('directorys', [
      'updateLabelList'
    ]),
    Getprovince (value) {
      this.citys = cityApi.citys(value[0]).map(d => ({
        value: d,
        label: d
      }))
      this.questionsRuleForm.province = value[0]
    },
    GetCity (value) {
      this.questionsRuleForm.city = value[0]
    },
    getSubjectID (val) {
      this.updateCatalogList({ subjectID: val })
      this.updateLabelList({ subjectID: val })
    },
    submit () {
      // 单选
      if (this.questionsRuleForm.questionType === '1') {
        const arr = []
        for (const key in this.questionsRuleForm.options) {
          arr.push({
            code: key,
            title: this.questionsRuleForm.options[key],
            img: '',
            isRight: key === this.radio ? true : false
          })
        }
        this.questionsRuleForm.options = arr
        add(this.questionsRuleForm)
        this.$router.push({
          name: 'questions-list'
        })
        // 多选
      } else if (this.questionsRuleForm.questionType === '2') {
        const arr = Object.keys(this.questionsRuleForm.options).map(i => ({
          code: i,
          title: this.questionsRuleForm.options[i],
          img: '',
          isRight: this.checkList.some(d => d === i)
        }))
        this.questionsRuleForm.options = arr
        add(this.questionsRuleForm)
        this.$router.push({
          name: 'questions-list'
        })
      } else {
        this.questionsRuleForm.options = ['A', 'B', 'C', 'D'].map(i => ({
          code: i,
          title: '',
          img: '',
          isRight: false
        }))
        add(this.questionsRuleForm)
        this.$router.push({
          name: 'questions-list'
        })
      }
    }
  }
}
</script>

<style scoped lang='sass'>
.container
  background-color: #fff
.questionsInput-title
  padding: 16px
  border-bottom: 1px solid #eee
  margin-bottom: 20px
.questionInput-from
  padding: 0 40px 40px 40px
.input-width
  width: 400px
.options-width
  width: 160px
.upload
  // display: inline-block
::v-deep .ql-editor
  height: 260px
::v-deep .avatar-uploader .el-upload
  height: 60px
  width: 100px
  border: 1px dashed #d9d9d9
  border-radius: 6px
  cursor: pointer
  text-align: center
  line-height: 60px
::v-deep .avatar-uploader .el-upload:hover
    border-color: #409EFF
.radio
  margin-bottom: 10px
</style>
